<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <script type="text/javascript">
        window.onload=function () {
                document.addEventListener('touchstart',function (event) {
                    if(event.touches.length>1){
                        event.preventDefault();
                    }
                })
                var lastTouchEnd=0;
                document.addEventListener('touchend',function (event) {
                    var now=(new Date()).getTime();
                    if(now-lastTouchEnd<=300){
                        event.preventDefault();
                    }
                    lastTouchEnd=now;
                },false)
            }
    </script>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="./css/style.min.css">
    <title>我的订单</title>
</head>

<body class="cmc-body">
    <div id="personal_center">
        <div class="t-container">
            <header class="cl" v-show="header.show">
                <div class="nav-bar cl">
                    <span class="goback arrow_l" @click="goback"></span>
                    <span class="page-name" v-cloak>使用优惠券</span>
                </div>
            </header>
            <div class="t-main">
                <div class="t-whole-main" v-cloak>
                    <div class="t-whole-goods-item t-cmc-goods-item" >
                        <div class="verifyCoupon-wrap">
                            <label>优惠码：</label>
                            <div class="input-group" >
                                <input type="text" v-model="couponCode" :class="{'fail':isFail}">
                                <button type="button" @click="verifyCoupon" class="verify">验证</button>
                            </div>
                            <!-- <div class="input-group" v-if="verifyRes==1">
                                <span class="coupon">{{couponCode}}</span>
                                <button type="button" @click.prevent="editCoupon" class="edit">修改</button>
                            </div> -->
                        </div>
                        <a href="javascript:void(0)" @click="chooseCoupons(item,$index)" :class="{'disabled':AvailableCoupons.indexOf(item.id) == -1 && CouponIdsAndSi.indexOf(item.id) == -1 }" v-for="(item,$index) in list" v-cloak>
                            <div class="t-gap-box"></div>
                            <div class="t-whole-content t-clp-content">
                                    <div class="t-clp-group">
                                        <div class="clp-icons">
                                            <i  :class="{active:item.id===selected, 'y-active': item.couponType == 1,checkboxActive:dActive[$index]}" ><em></em></i>
                                        </div>
                                        <div class="p-group" v-cloak>
                                            <strong class="t-cmc-title" v-if="item.type == 11">现金券</strong>
                                            <strong class="t-r-title" v-if="item.couponType == 0">活动券</strong>
                                            <p style="color:#999;font-size: 12px;">{{item.subTitle}}</p>
                                            <p><span >有效期至{{item.useEndTime}}</span></p>
                                        </div> 
                                    </div> 
                                    <div :class="[item.couponType == 1 ? clpYRight : clpRight,clpRight]">
                                        <p class="first-p">￥<span class="t-ss-big">{{item.amount}}</span></p>
                                        <p  v-if="item.type == 1"><span class="t-ss-small">满{{item.conditionAmount}}可用</span></p>
                                    </div>                                                                      
                            </div>
                        </a>                                                                
                    </div>
                </div>
                <p class="loading-tip" v-cloak>{{loading_tip}}</p>
            </div>
        </div>
        <div class="t-footer return-footer add-footer">
            <a href="#" class="form-btn form-btn-a" @click.prevent="couponConfirm">
                <span>确定</span>
            </a>
        </div>
        <confirm ref="confirm"></confirm>
        <toast ref="toast" style="z-index: 20001;"></toast>
        <alerts ref="alerts"></alerts>
    </div>
    <script src="./js/lib/vue.js"></script>
    <script src="http://static.jdhui.com/lib/vue-resource/1.2/vue-resource.js"></script>
    <script src="./js/min/config.min.js"></script>
    <script src="./js/min/common.min.js"></script>
    <script src="./js/min/component.min.js"></script>
    <script>
        var backUrl = encodeURIComponent(window.location.href);
        var toast = component.popup.toast(),
            confirm = component.popup.confirm({
                name: 'confirm',
                type: 'confirm'
            }),
            alerts = component.popup.confirm({
                name: 'alert',
                type: 'alert'
            });
        var couponSele = new Vue({
            el: '#personal_center',
            data: function() {
                return {
                    clpRight:'t-clp-box-right',
                    clpYRight:'t-yellow-box-right',
                    dActive:[],
                    selected:'0',
                    header: {
                        show: !APP.iswechat()
                    },
                    list: [],
                    isloading: false,
                    page: 0,
                    loading_tip: '数据加载中',
                    store_id: APP.getQueryString('storeid'),
                    cartid : APP.getQueryString('cartIds'),
                    coupon_id:APP.getQueryString('couponIds'),
                    addrid:APP.getQueryString('addressId'),
                    coupon_amount: 0,
                    keyword: '',
                    startTime: '',
                    endTime: '',
                    shop_name: '',
                    member_id: '',
                    couponData:'',
                    couponCode:'',
                    verifyRes:0,
                    isFail:false,
                    couponcode_amount:0,
                    NoList_couponcode_amount:0,
                    couponIsChk:false,
                    cpIds:[],
                    single:'',
                    CouponIdsAndSi:'',
                    listCounpId:'',
                    CounpListCounpId:'',
                    couponLists:[],
                    AvailableCoupons:[],
                    coupon_code_ids:[],
                    ccid:'',
                    SelectedCoupons:[],
                    hasListCounp:false,
                    cupList:false,
                    NoList:false,
                    slCup:'',
                    coupItem:''
                }
            },
            mounted: function() {
                Vue.http.options.xhr = {
                    withCredentials: true
                }
                Vue.http.options.credentials = true;
                APP.init(this, function() {
                    this.shop_name = APP.getCookie('shopname');
                    this.member_id = APP.getCookie('memberid');
                }.bind(this), function(arg) {
                    this.shop_name = arg.body.data.shop.shop_name;
                    this.member_id = arg.body.data.member.member_id;
                }.bind(this));
                this.getData();
                window.addEventListener('scroll', this.scrollLoading);
            },
            destroyed: function() {
                window.removeEventListener('scroll', this.scrollLoading);
            },
            components: {
                'toast': toast,
                'confirm': confirm,
                'alerts': alerts
            },
            methods: {
                goback: function() {
                    window.history.go(-1); 
                },
                getData: function() {
                    this.page++;
                    this.isloading = true;
                   Vue.http.get(APIJAVA + 'c/mobile/order/settle/json?shopId='+ this.store_id +'&cartIds='+this.cartid).then(function(_res){
                            this.isloading = false;
                            var _data = _res.body;
                            if(_data.code == 1){
                                if(_data.obj.couponList == null){
                                    this.loading_tip = '没有可用优惠券';
                                }else{
                                    this.list = this.list.concat(_data.obj.couponList);
                                    var couponIdArr = this.coupon_id.split(',');

                                    this.list.forEach(function(v,k){
                                        this.AvailableCoupons.push(v.id);
                                        this.coupon_code_ids.push(v);
                                    }.bind(this))
                                      
                                     console.log(_data.obj.couponList.length);
                                    if(_data.obj.couponList.length < 10 ){
                                        this.loading_tip = '没有更多优惠券';
                                        setTimeout(function() {
                                            window.removeEventListener('scroll', this.scrollLoading);
                                        }.bind(this), 100);
                                    }else{
                                        console.log(_data.message);
                                        this.loading_tip = '没有更多优惠券';
                                    }   

                                    //遍历已选优惠券
                                    for(var i = 0;i<couponIdArr.length;i++){
                                        
                                        
                                        var _index = this.AvailableCoupons.indexOf(couponIdArr[i]);
                                        //console.log(this.list[_index]);
                                        
                                        this.chooseCoupons(this.list[_index],_index);  

                                        console.log(this.coupon_amount);
                                                                                                                                        
                                    }

                                }
                            }else{
                                this.loading_tip = '没有可用优惠券';
                            }
                       }.bind(this),function(err){
                            this.isloading = false;
                       }.bind(this))

                },
                // scrollLoading: function() {
                //     if (this.isloading) return;
                //     if (document.body.scrollHeight - document.body.scrollTop - window.innerHeight < 150) {
                //         this.getData();
                //     }
                // },
                chooseCoupons:function(i,index){
                    this.coupon_id = i.id;
                    //手动选择优惠券         
                    if(this.AvailableCoupons.indexOf(i.id) == -1 && this.CouponIdsAndSi.indexOf(i.id) == -1){
                        
                        this.$refs.alerts.show({
                            title: '优惠券',
                            content: '此优惠券不可用',
                            confirmText: '关闭'
                        })
                        
                    }else{
                        
                        //活动优惠券
                        if(i.couponType == 0){                         
                            var _index = this.cpIds.indexOf(i.id);
                            if(_index != -1){
                                this.cpIds.splice(_index,1);
                            }else{
                                this.cpIds.push(i.id);
                            }
                            //复选添加样式并计算优惠金额
                            if(this.dActive[index]){
                                this.$set(this.dActive,index,false);
                                this.coupon_amount -= i.amount;
                                this.coupon_id = '';
                                this.CouponIdsAndSi = this.cpIds.join(",")
                            }else{
                                this.$set(this.dActive,index,true);
                                this.coupon_amount += i.amount;

                            }

                            console.log(this.coupon_amount);
                            

                            //this.selected = i.id;
                        
                            if(this.single == i.id){
                                this.single = '';
                                
                            }else{
                                this.single = i.id;
                            }
                            

                        //现金券
                        }else if(i.couponType == 1){ 
                            //删除索引对应的ID
                            var _index = this.cpIds.indexOf(i.id);
                            if(_index != -1){
                                this.cpIds.splice(_index,1);
                            }else{
                                this.cpIds.push(i.id);
                            }
                           //复选添加样式并计算优惠金额
                            if(this.dActive[index]){
                                this.$set(this.dActive,index,false);
                                this.coupon_amount -= i.amount;
                                this.coupon_id = '';
                                this.CouponIdsAndSi = this.cpIds.join(",") 
                            }else{
                                this.$set(this.dActive,index,true);
                                this.coupon_amount += i.amount;
                            }

                            console.log(this.coupon_amount);                                      
                        }

                        console.log(this.cpIds);
                        
                      
                       
                        
                        Vue.http.get(APIJAVA +'c/mobile/order/checkCoupon?shopId=' + this.store_id +'&cartIds='+this.cartid + '&couponIds=' +  this.CouponIdsAndSi +"&couponId=" + this.coupon_id + "&couponCodes=" + this.couponCode).then(function(_res){
                            if(_res.body.code == 1){
                                var _list = [];
                                var _re = _res.body.obj.couponList; 
                                _re.forEach(function(v,k){
                                    _list.push(v.id);
                                    
                                }.bind(this));
                                this.AvailableCoupons = _list; 
                        
                            }
                        }.bind(this))

                        //拼接数组成字符串
                        if(this.single == ""){
                           this.CouponIdsAndSi = this.cpIds.join(",") 
                        }else if(this.cpIds.length == 0){
                            this.CouponIdsAndSi = this.single;
                        }else{
                            this.CouponIdsAndSi = this.cpIds.join(",");
                        }
                    }                                                           
                    //console.log(this.CouponIdsAndSi);
                    //console.log(this.AvailableCoupons);
                    // this.couponCode="";
                    //this.verifyRes=1;
                    
                    //优惠码选择优惠券
                    

                },
                selectedCoupons:function(){

                },
                verifyCoupon:function(){
                    console.log(this.couponCode);
                    this.couponCode=this.couponCode.trim();
                    var _reg=/^[a-zA-Z0-9]+$/i;
                    var _test=_reg.test(this.couponCode)
                    if (_test) {
                        this.hasListCounp = false; 
                           Vue.http.get(APIJAVA+'c/mobile/order/checkCoupon?shopId='+this.store_id+'&cartIds='+this.cartid+'&couponCode='+this.couponCode + '&couponIds=' + this.CouponIdsAndSi ).then(function(_res){
                                if (_res.body.code==1) {
                                    var _list = [];
                                    var _re = _res.body.obj.couponList; 
                                    _re.forEach(function(v,k){
                                        _list.push(v.id);
                                        
                                    });
                                    this.AvailableCoupons = _list;                                     
                                    
                                    couponSele.$refs.toast.show('优惠码可用');
                                    couponSele.couponData=_res.body.obj.couponInfo;
                                    // // couponSele.coupon_id = couponSele.couponData.couponId;
                                    // couponSele.couponcode_amount = couponSele.couponData.amount;
                                     couponSele.NoList_couponcode_amount = couponSele.couponData.amount;
                                     couponSele.verifyRes=1;

                                    // couponSele.isFail=false; 
                                    // couponSele.coupon_id="";
                                    // couponSele.selected = "";
                                }else if(_res.body.code==-1){
                                   couponSele.$refs.toast.show('优惠码校验失败');
                                   couponSele.isFail=true; 
                                }else{
                                    couponSele.$refs.toast.show(_res.body.message);
                                    if (_res.body.code==-100) {
                                        setTimeout(function(){
                                        window.location.href="login.html?storeid="+couponSele.store_id+"&redirectUrl="+backUrl;
                                        },2000)
                                    }
                                }
                            
                                }.bind(this),function(){
                                    couponSele.$refs.toast.show('请求出错了');
                            })
                        // }  
                        
                    }else{
                        couponSele.$refs.toast.show('验证码格式限字母和数字');
                    }
                    for (var i = 0; i < this.list.length; i++) {
                        if (this.list[i].code==this.couponCode) { 
                            this.hasListCounp = true;
                            this.NoList = true;
                            this.couponIsChk=true;
                            this.chooseCoupons(this.list[i],i);
                            //this.couponCode="";
                            //alert(!this.couponIsChk);
                            //return false;

                        }else{
                            console.log(this.slCup);   
                            //console.log(this.coupItem);
                           
                            // this.$set(this.dActive,this.slCup,false);
                            // this.NoList = false;
                        }                                                      
                    }
                        // if(!this.hasListCounp){
                        //     this.chooseCoupons(this.coupItem,this.slCup);
                        // }
                        // if (!this.couponIsChk) {
                         
                },
                editCoupon:function(){
                    this.verifyRes=0;
                    
                },
                couponConfirm:function(){
                    console.log(this.NoList_couponcode_amount);
                    
                    
                    for(var i = 0;i<this.coupon_code_ids.length;i++){
                        if(this.coupon_code_ids[i].code == this.couponCode){
                            var _index = this.cpIds.indexOf(this.coupon_code_ids[i].id);

                            if(_index != -1){
                                this.cpIds.splice(_index,1);
                                this.CouponIdsAndSi = this.cpIds.join(",")
                            }
                            
                            console.log(this.cpIds);
                            console.log(this.CouponIdsAndSi);  
                        }
                    }
                    

                    if(!this.hasListCounp){  
                        
                        this.coupon_amount += this.couponcode_amount;   
                        console.log("计算价格" + this.coupon_amount);
                    }
                    if(!this.NoList){
                        this.coupon_amount += this.NoList_couponcode_amount;
                        console.log("优惠码不在列表计算价格:" + this.coupon_amount); 
                    }

                    if (this.verifyRes == 0 && this.couponCode != "") {
                        couponSele.$refs.toast.show('请先验证优惠码');
                        return;
                    }else{
                        window.location.href='checkout.html?storeid=' + this.store_id + '&bncartid=' + this.cartid + '&addressId=' + this.addrid + '&couponIds=' + this.CouponIdsAndSi + '&amount=' + this.coupon_amount+'&couponcode='+this.couponCode ;
                        console.log(this.CouponIdsAndSi);
                    }
                   
                }
            },
            computed:{
                // cpu_amount:function(){
                //     return couponSele.couponcode_amount+couponSele.coupon_amount;
                // }
            }
        })
    </script>
</body>

</html>